import React from "react";
import { RegisterCommand, withPropsAPI } from "gg-editor";

const RightDrawer = React.lazy(() => import('../common/Drawer'));
class EditCommand extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    }
  }

  showDrawer = () => {
    this.setState({
      visible: true,
      title:"",
      model:""
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  render() {
    const that = this;
    const { propsAPI } = this.props;

    const config = {
      // 是否进入列队，默认为 true
      queue: true,

      // 命令是否可用
      enable(/* editor */) {
        return true;
      },

      // 正向命令逻辑
      execute(/* editor */) {
        let res = propsAPI.save();
        console.log("model :" + JSON.stringify(propsAPI.getSelected()[0].model));
        console.log(res,'-------res');
        let { title,modal,index,id} = propsAPI.getSelected()[0].model;
        that.setState({
           title,
           model: modal,
           visible:true,
           nodeId:id
        })
      },

      // 反向命令逻辑
      back(/* editor */) {
        console.log("执行反向命令");
      },

      // 快捷按键配置
      shortcutCodes: [["metaKey", "n"], ["ctrlKey", "n"]]
    };
    const {title,model,visible,nodeId} = this.state;
    const {dialogId} = this.props;
    console.log(dialogId,'----------------------------dialogId');
    return (
      <div>
        <RegisterCommand name="editCommand" config={config} />
        <RightDrawer title={title} model={model} visible={visible} onClosed={this.onClose} nodeIds={nodeId} dialogId={dialogId} />
      </div>
    );
  }
}

export default withPropsAPI(EditCommand);
